<!--采砂巡查-->
<template>
<div class="page-box">
    <div class="search-box">
        <el-form :inline="true" :model="searchForm" size="medium">
            <el-form-item label="">
                <el-select v-model="searchForm.unit" placeholder="单位名称">
                <el-option label="孝感市水利和湖泊局" value="1"></el-option>
                <el-option label="孝南区水利和湖泊局" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="">
                <el-input v-model="searchForm.keyword" placeholder="关键字搜索"></el-input>
            </el-form-item>
            <el-form-item>
                <el-date-picker
                    v-model="searchForm.timeRange"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary">查询</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="table-box">
        <el-table
            :data="tableData"
            border
            size="medium"
            height="calc(100vh - 315px)"
            style="width: 100%">
            <el-table-column align="center" label="序号" type="index"  width="60"></el-table-column>
			<el-table-column align="center" label="编号" prop="number" width="70"></el-table-column>
            <el-table-column align="center" label="区域" prop="region" width="140"></el-table-column>
			<el-table-column align="center" label="巡查类型" prop="findType" width="120"></el-table-column>
            <el-table-column align="center" label="具体地点" prop="address" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="巡查部门" prop="dept" width="180"></el-table-column>
            <el-table-column align="center" label="巡查时间" prop="time" width="160"></el-table-column>
			<el-table-column align="center" label="问题" prop="problem" show-overflow-tooltip></el-table-column>
			<el-table-column align="center" label="问题描述" prop="problemDesc" show-overflow-tooltip></el-table-column>
			<el-table-column align="center" label="巡查人" prop="findPerson" width="90"></el-table-column>
            <el-table-column align="center" label="操作" width="80">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
                    <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :current-page="pageNo"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            searchForm:{
                unit:'',
                keyword:'',
                timeRange:[]
            },
            tableData:[
				{ number:'1001', region: '孝昌县',findType:'河流沙滩',address:'双峰山沙A区',dept:'孝昌县水利和湖泊局', time: '2020-09-07 10:20:36', problem: '无', problemDesc: '无', findPerson: '张三' },
				{ number:'123456', region: '孝南经济开发区',findType:'集中停靠点',address:'双峰山沙A区',dept:'孝昌县水利和湖泊局', time: '2020-09-07 10:20:36', problem: '污染问题', problemDesc: '采砂导致河流污染,破坏生态环境', findPerson: '西门吹雪' },
            ],
            pageSize:10,
            pageNo:1,
            total:16
        }
    },
    created(){},
    methods: {
        // 表格数据操作
        handleEdit(index,val){},
        handleDelete(index,val){
            console.log(val)
            this.$confirm('已选项目【'+val.projectName+'】, 是否删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message.success('删除成功!');
            }).catch(() => {});
        },
        // 分页操作
        handleSizeChange(val){
            this.pageSize=val;
        },
        handleCurrentChange(val){
            this.pageNo=val;
        }
    }
}
</script>
<style lang="scss" scoped>
.page-box{
    height: 100%;
    overflow: hidden;
}
</style>